@extends('layouts.home.base')
@section('title','首页')
@section('style')
    <style>
        .layui-carousel>[carousel-item]{
            background: none;
        }
        .banner-img{
            width: 100%;
            /*height: 100%;*/
        }
        .layui-tab-brief{
            padding: 30px 50px;
        }
        .layui-tab-title>li{
            font-size: 14px;
            font-weight: 400;
            margin: 0 ;
            padding: 0;
            font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
            font-style: normal;
            color: rgba(0, 0, 0, 0.647058823529412);
        }
        .layui-tab-title{
            border-bottom: none;
        }
        .font-title{
            font-weight: 400;
            font-size: 26px;
            margin-left: 30px;
        }
        .carousel-div{
            background-image: url("{{env('APP_URL').'/images/bluebg.jpeg'}}");
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }
        .layui-carousel{
            margin: 0 auto;
        }
        .layui-card{
            background-color: #f4f4f4;
        }

        #content{
            background-color: #f4f4f4;
        }

        .cover {
            width: 100%;
            height: 14vw;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }
        .bannerCut{
            width: 100%;
            height: 100%;
            display: inline-flex!important;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }
        .layui-tab-title .layui-this {
            color: #1890FF;
        }
        #activityContent{
            /*border: 1px solid #9F9F9F;*/
            box-shadow:0px 0px  2px 2px #aaa;
        }
    </style>
@endsection
@section('content')
    <div id="content">
        <div class="layui-card" >
            <!-- 导航区域 -->
            <div class="layui-card-body">
           <span class="layui-breadcrumb" style="padding: 20px 10px">
               <a><cite><i class="pear-icon pear-icon-home"></i>活动首页</cite></a>
           </span>
            </div>
        </div>
        <div class="carousel-div">
            <div class="layui-carousel" id="test1" lay-filter="test1"></div>
        </div>
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
{{--            <div class="layui-card">--}}
{{--                <div class="layui-card-header">--}}
{{--                    <span class="more-a" style="float: right"><a id="moreBtn" href="javascript:void(0)">更多>></a></span>--}}
{{--                </div>--}}
{{--            </div>--}}
            <div>
                <div class="layui-row">
                    <div class="layui-col-md1" style="width: 5%;margin-top: 8px;margin-left: 10px">
                        <span style="vertical-align: sub">活动类别</span>
                    </div>
                    <div class="layui-col-md6">
                        <ul class="layui-tab-title" id="activityTypes"></ul>
                    </div>
                    <div class="layui-col-md4 layui-col-lg-offset1" style="text-align: right;margin-left: 10.3%">
                        <div class="layui-inline">
                            <input id="keyword" type="text" value="" class="layui-input" placeholder="请输入活动名称" autocomplete="off">
                        </div>
                        <div class="layui-inline">
                            <button type="button" id="doQuery" class="layui-btn layui-btn-primary" style="color:#fff;background-color: rgba(22, 155, 213, 1);">搜索</button>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <div class="layui-row">
                    <div class="layui-col-md1" style="width: 5%;margin-top: 8px;margin-left: 10px">
                        <span style="vertical-align: sub">活动状态</span>
                    </div>
                    <div class="layui-col-md6">
                        <ul class="layui-tab-title">
                            <li lay-id="0" class="layui-this">全部</li>
                            <li lay-id="1">未开始</li>
                            <li lay-id="2">进行中</li>
                            <li lay-id="3">已结束</li>
                        </ul>
                    </div>
                    <div class="layui-col-md4" style="text-align: right;margin-top: 8px;margin-left: 2.1%">
                        <div class="layui-inline">
                            <span>时间排序：</span>
                        </div>
                        <div class="layui-inline">
                            <ul class="layui-tab-title" style="width: 0px">
                                <li lay-id="2" class="layui-this">倒序</li>
                                <li lay-id="1">正序</li>
                            </ul>
                        </div>

                    </div>
                </div>
            </div>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div class="cloud-card-component">
                        <div class="layui-row layui-col-space30" id="activityContent"></div>
                    </div>
                    <div class="pagebarbox" style="text-align: right"><div id="pageBar" class="pagebar"></div></div>
                </div>
            </div>
        </div>

    </div>

    <script id="carouselstpl" type="text/html">
        <div carousel-item="">
            @{{#  layui.each(d, function(index, img){ }}
            @{{# if(img.url != ''){ }}
            <div class="banner-row">
                <div class="bannerCut">
                    <img class="banner-img" src="{{env('APP_URL')}}@{{ img.url }}">
                </div>
            </div>
            @{{#  } }}
            @{{#  }); }}
        </div>
    </script>
    <script id="activityTpl" type="text/html">
        @{{# if(d.length == 0){ }}
        <div class="layui-row" style="text-align: center">
            暂无数据
        </div>
        @{{#  }else{ }}
        @{{#  layui.each(d, function(index, item){ }}
        <div id="@{{ item.id }}" onclick="cardTableCheckedCard(this)" class="layui-col-md3 ew-datagrid-item" data-index="@{{index}}" data-number="@{{ index+1 }}">
            <div class="project-list-item">
                <div style="width: 100%;height: 14vw;">
                    <div class="cover">
                        <img class="project-list-item-cover" style="height: auto;" src="{{env('APP_URL')}}@{{item.cover_url}}">
                    </div>
                </div>

                <div class="project-list-item-body">
                    <div class="project-list-item-text layui-text">
                        <span>@{{ item.activity_name }}</span>
                        @{{# if(item.astatus == "02"){ }}
                        <span style="float: right;color: #4994f0">进行中</span>
                        @{{# }else if(item.astatus == "03"){ }}
                        <span style="float: right;color: #fe7786">已结束</span>
                        @{{# }else{ }}
                        <span style="float: right;color: #b3b3b3">未开始</span>
                        @{{# } }}
                        <hr>
                    </div>
                    <div class="project-list-item-desc">
                        <div class="layui-row" style="padding: 0;">
                            <div class="layui-col-md4"><i class="pear-icon pear-icon-browse"></i>&nbsp;&nbsp;&nbsp;&nbsp;@{{ item.blower_num }}</div>
                            <div class="layui-col-md8"><i class="pear-icon pear-icon-favorite"></i>&nbsp;&nbsp;&nbsp;&nbsp;@{{ item.favorite_num }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @{{#  }); }}
        @{{#  } }}
    </script>
@endsection

@section('script')
    <script>
    </script>
@endsection
